h1 {
    color: black;
    text-align: center;


}

img {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
}


nav ul li a {
    color: white;
}

nav ul li {
 display: incline-block;
 line-height: 80px;
 margin: 0 5px;
 display: inline-block;
 font-family: 'Lucida Sans';
 color: white;
 

}

nav a:link {
    text-decoration: none;
    color: white;
  }

.menu{
    background-color: black;
    padding-top: 20px;
    border-radius: 80px;

    



}





.foot{
    background-color: e5aa6b;
    background-color:black;
    font-family:sans-serif;

}

a{
    color: white;
}



  .product{
    background-color: red;
    width: auto;
    padding: 10px;
    text-align: center;
    
}



.gridproductd{
  width:100%;
  overflow:auto;
}

header {
    color: rgb(11, 9, 60);
    text-align: center;
    text-overflow: ellipsis;
    margin: auto;
    width: auto;
    
    font-size: large;
    font-weight: 100;
    font-family: Verdana;
    margin-top: 10px;
    
}

html {
    scroll-behavior: smooth;
  }


.ankush{
    text-align: center;
    background-color: black;
    color: white;
    float: right;
    height: auto;
    width: 100%;
}

div.mycontainer {
    width:100%;
    overflow:auto;

  }


article{
    color: black;
    align-content: flex-start;
    width: 80%;
    background-color: #024950;
    margin-bottom: 5%;
    padding-top: 100px;
    margin-top: 5%;
    border-top-left-radius: 400px;
    border-bottom-right-radius: 400px;
    color: white;
    

    
}

article h3{
    color: white;
}



.ankush{
    width:40vw;
    float: left;
    border-radius: 400%;
      
    
}

.whyspine{
    text-align: center;
    background-color: #3CBC8D;
    color: black;

}


form{
    border-style: groove;
    color: black;
    text-align: center;
}

footer{

    text-align: center;
    border-top-left-radius: 400px;
    border-bottom-right-radius: 400px;
    


}

#grad {
    background-image: linear-gradient(red, yellow);
  }

button{
width: 100%;
height: 100px;
font-size: larger;
background-color: #406E8E;
color: white;

}

input[type=text] {
    background-color: #3CBC8D;
    color: white;
  }

p{
    color: black;
    padding: 40px;
    align-content: flex-start;

}


h2{
    text-align: center;
}

.ank{
    padding: 40px;
    padding-bottom: 10px;
    text-align: center;
    padding-top: inherit;
}

h3{
    text-align: center;
    padding-top: 100px;
}

.call{
    background-color: black;
    color: white;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    border-bottom-right-radius: 60px;
    border-bottom-left-radius: 60px;
    background-color: #fbe9d0;
    color: black;
    
    
}


.image2{
    width: 700px;
    height: 500px;
    float: left;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    padding-left: 2%;

    

    
}

article{

    width: 100%;
    float: left;
    padding: 50px;
}

h4{
    color: black;
    text-align: center;
    
}




body{
    background-color: white;
    overflow-x: hidden;
    width: 80%;
    

}


.headerimage{
    width: 50%;
    float: left;
    border-radius: 50%;
    border-top-left-radius: 65%;
    height: 500px;
    margin-left: 10px;
   


}

.footersection{

    font-size:small;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    width: 100%;
    color: white;
    text-align: left;
    
    
}




html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Apply box-sizing to all elements */
*, *::before, *::after {
    box-sizing: inherit;
}


h4{
    text-align: center;
}


@media only screen and (max-width: 600px) {
    img {
      width: 100%;
      height: 50px;
    }

    h1{
        font-size:larger;
        margin-top:200px;
        background-color: rgb(238, 137, 14);
        padding: 25px;
        color: white;
        
    }
    .art{
        width: 100%;
    }

    .headerimage{
        width: 100%;
        height: 150px;
        border-radius: 0%;
        

    }

    .image2{
        width: 100%;
        height: 200px;
        border-top-left-radius: 0%;
        border-top-right-radius: 0%;
        border-bottom-left-radius: 0%;
        border-bottom-right-radius: 0%;

    }
    


    .mobile{
        width: 100%;
    }

    h4{
        width: 100%;
    }

    .paragraph{
        width: 100%;
    }
    h3{
        font-size: small;
        font-family: sans-serif;
        font-weight: 400;
        color: rgb(215, 140, 20);
        font-size: x-large;
        padding-top: 10%;
        
    }



.an{
    margin-top: 20px;
}


 button{
    margin-left: 20%;
    margin-right: 20%;
 }
 .menu{
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
    border-bottom-left-radius: 0%;
    border-bottom-right-radius: 0%;
    width: 100%;

 }

 .down{
    font-size: smaller;
    display: inline;
    padding-bottom: 20%;
    
 }

 .footersection{
    font-size: small;


 }


.maintest{
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}

.footcol1{
    margin-right: 1000px;
    text-align: left;
}

.footcol1 h3{
    
    text-align: left;
}
.footcol3 nav {
    
    text-align: left;
    
}

.footcol3 h3 {
    
    text-align: left;
    
}

.footcol1 ul li a {
    font-size: 13px;
    line-height: 40px;
}

.footcol3 ul li a {
    font-size: 13px;
    line-height: 40px;
    padding-top: 200px;
}



.footcol2 h3 {
    text-align: center;
    margin-right: 100px;
    margin-bottom: 1px;
    

}

.footcol2 p {
    text-align: left;
    margin-right: 100px;
    color: white;
    

}

footer .footcol3 { 
    
    display: none; 
}

footer .footcol2 { 
    
    display: none; }

.par{
    margin-top: 5px;
    
}

 




}

h5{
    color:#FAF1E1;
}


@media only screen and (max-width: 1440px){


.maintest{
    display: none;
}


   
}










  @keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}

  }



.run{
    color: rgb(25, 52, 88);
    width: 100%;
}



.column {
    float: left;
    width: 50%;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

.ar{
    background-color: #070707;
    padding-top: 5px;
    color: white;
}

.down{
    color: white;
}


a:link{
    color: yellow;
}


.maintest{
 
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background-color: white;
    
    
}

.test2 {
    height: 250px;
    width: 600px;
    background-color: #fbe9d0;
    margin: 60px;
    display: inline-block;
    border-top-left-radius: 5%;
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
    border-top-right-radius: 5%;
    
    
    

   
    
}

.test3{
    height: 250px;
    width: 600px;
    background-color: #fbe9d0;
    margin: 60px;
    display: inline-block;
    border-top-left-radius: 5%;
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
    border-top-right-radius: 5%;
    padding: 5px;
}


.test4{
    height: 250px;
    width: 600px;
    background-color: #fbe9d0    ;
    margin: 60px;
    display: inline-block;
    border-top-left-radius: 5%;
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
    border-top-right-radius: 5%;
    padding: 5px;
    color: #DCF5DE;
}


.test5{
    height: 250px;
    width: 600px;
    background-color: #fbe9d0;    
    margin: 60px;
    display: inline-block;
    border-top-left-radius: 5%;
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
    border-top-right-radius: 5%;
    padding: 5px;
    color: #DCF5DE;
}



.footmain{
 
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background-color: rgb(229, 225, 225);
    
}

.footcol1 {
    height: 370px;
    width: 335px;
    margin: 60px;
    display: inline-block;
    color: white;
    
}

.footcol2{
    height: 370px;
    width: 335px;
    
    margin: 60px;
    display: inline-block;
    text-align: center;
    

}

.footcol3{
    height: 370px;
    width: 335px;
    
    margin: 60px;
    display: inline-block;
    text-align: center;

}

footer{
    background-color: rgb(33, 34, 35);
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
}

.footcol1 nav{
    background-color: rgb;
    color: black;
}
    

.footcol1 a{
    color: white

}

footer nav ul li {
    display: block;

}

.footcol2 h3 {
    color: white;
    text-align: center;
}

.footcol1 h3{
    color: white;
}


.footcol3 h3 {
    color: white;
}


.footcol1 a:link {
    text-decoration: none;
    
  }

.footcol2 a:link {
    text-decoration: none;
  }

.footcol3 a:link {
    text-decoration: none;
    color: white;
  }

.footcol2 p{
    color: white;
    font-size: large;
    text-align: left;

}

.footer-links a {
    margin-right: 10px; /* Adjust the value as needed */
}


.footcol1 ul li a {
    font-size: 20px;
    line-height: 50px;
}

.footcol3 ul li a {
    font-size: 20px;
    line-height: 50px;
}
   
    
@media only screen and (min-width: 375px) and (min-height: 896px) {

.button{
    display: none;
}




.footcol{
    display:contents;
}
}



/* Style all font awesome icons */
.fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
  }
  
  /* Add a hover effect if you want */
  .fa:hover {
    opacity: 0.7;
  }
  
  /* Set a specific color for each brand */
  
  /* Facebook */
  .fa-facebook {
    background: #3B5998;
    color: white;
  }
  
  /* Twitter */
  .fa-twitter {
    background: #55ACEE;
    color: white;
  }

  .fa-instagram {
    background: #F56040;
    color: white;
  }


.social{
    margin-left: 500px;
    margin-top: 100px;
    
}


@media only screen and (min-width: 320px) {
    
 
    .menu {
        flex-direction: column; /* Stack items vertically */
        align-items: left;
        padding: 0%;
        width: 100%;
        margin-left: 0;
        background-color: black;
      }


      .menu li {
        margin: 5px 0;

      }



article{
   
   border-top-left-radius: 0px;
   border-bottom-right-radius: 0px;

}

h3{
    color: black;
}

footer{
   border-top-left-radius: 0;
   border-bottom-right-radius: 0;
}

.call{
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
}


.column{
  
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 100px;
    background-color: gray;
}

.menu{
    width: 100%;
    background-color: rgb(22, 22, 21);
}

    }
    
.link-style{
    
    color: #007BFF; /* Your desired link color */
    text-decoration: none;
}

.column{
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}



@media only screen and (min-width: 425px)
{
    .column{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    }
}

@media only screen and (max-width: 320px)
{
    .column{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    }



}

.headbpa{
    font-family: sans-serif;
    
}

.par{
    font-family: sans-serif;
    
   
}

.row{
    font-family: sans-serif;
}

.call{
    font-family: sans-serif;
}

.mobile{
    font-family: sans-serif;
}

.art{
    font-family: sans-serif;
    
}

.maintest{
    font-family: sans-serif;
}


.service{
    float: left;
    width: 50%;
    border-radius: 50%;
}




.menu {
    display: block;  /* Default state */
    font-family: Verdana;

}


.headbpa {

    color: #1f1e1e;
    
}

.digi3{

    color: #074a86;
    font-size: 30px;
    font-family: 'Segoe UI';
    

}


.menu:hover {
    background-color: rgb(34, 33, 29);
    font-size: 18px;
    
  }

.test2:hover{
    background-color: rgb(231, 222, 222);
}

.test3:hover{
    background-color: rgb(227, 219, 219);
}


.test4:hover{
    background-color: rgb(227, 219, 219);
}



.test5:hover{
    background-color: rgb(227, 219, 219);
}

/* Reset margins and padding for all FAQ content */
#faq * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}

/* FAQ section container */
#faq {
  font-family: Arial, sans-serif;
  text-align: left;
  padding: 10px;
}

/* FAQ title */
#faq h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

/* Each FAQ item */
.faq-item {
  margin-bottom: 5px; /* Tight space between Q&As */
}

/* Question text */
#faq h3 {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  margin: 0 0 2px 0;
}

/* Answer text */
#faq p {
  font-size: 14px;
  line-height: 1.3;
  color: #555;
  margin-bottom: 4px;
}









.PerformanceMarketing{
  min-width: 200px;
  background: #406E8E;                     /* Light blue background */
  padding: 20px;                           /* Inner spacing */
  border-radius: 12px;                     /* Rounded corners */
  box-shadow: 0 2px 10px ;  /* Soft shadow for depth */
  flex-shrink: 0;                          /* Prevent shrinking while scrolling */
  text-align: center;    
  font-family: 'Segoe UI';
 

   } 

   .PerformanceMarketing h3,
.PerformanceMarketing p {
  color: white;
}

.OrganicMarketing{
  min-width: 300px;
  background: #406E8E;                     /* Light blue background */
  padding: 20px;                           /* Inner spacing */
  border-radius: 12px;                     /* Rounded corners */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);  /* Soft shadow for depth */
  flex-shrink: 0;                          /* Prevent shrinking while scrolling */
  text-align: center;  
  font-family: 'Segoe UI';

}   

   .OrganicMarketing h3,
.OrganicMarketing p {
  color: white;
}

.WebsiteDevelopment{
  min-width: 300px;
  background: #406E8E;                     /* Light blue background */
  padding: 20px;                           /* Inner spacing */
  border-radius: 12px;                     /* Rounded corners */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);  /* Soft shadow for depth */
  flex-shrink: 0;                          /* Prevent shrinking while scrolling */
  text-align: center; 
  font-family: 'Segoe UI'; 
  color: white;
  

}   



.WebsiteDevelopment h3,
.WebsiteDevelopment p {
  color: white;
}
.SocialMedia{
  min-width: 300px;
  background: #406E8E;                     /* Light blue background */
  padding: 20px;                           /* Inner spacing */
  border-radius: 12px;                     /* Rounded corners */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);  /* Soft shadow for depth */
  flex-shrink: 0;                          /* Prevent shrinking while scrolling */
  text-align: center;  
  font-family: 'Segoe UI';

}   

.SocialMedia h3,
.SocialMedia p {
  color: white;
}


.UGC{
  min-width: 300px;
  background: #406E8E;                     /* Light blue background */
  padding: 20px;                           /* Inner spacing */
  border-radius: 12px;                     /* Rounded corners */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);  /* Soft shadow for depth */
  flex-shrink: 0;                          /* Prevent shrinking while scrolling */
  text-align: center;  
  font-family: 'Segoe UI';

}   

.UGC h3,
.UGC p {
  color: white;
}

.Influencer{
  min-width: 300px;
  background: #406E8E;                     /* Light blue background */
  padding: 20px;                           /* Inner spacing */
  border-radius: 12px;                     /* Rounded corners */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);  /* Soft shadow for depth */
  flex-shrink: 0;                          /* Prevent shrinking while scrolling */
  text-align: center;  
  font-family: 'Segoe UI';

}   

.Influencer h3,
.Influencer p {
  color: white;
}



.Server{
  min-width: 300px;
  background: #406E8E;                     /* Light blue background */
  padding: 20px;                           /* Inner spacing */
  border-radius: 12px;                     /* Rounded corners */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);  /* Soft shadow for depth */
  flex-shrink: 0;                          /* Prevent shrinking while scrolling */
  text-align: center;  
  font-family: 'Segoe UI';

}   


.Server h3,
.Server p {
  color: white;
}






.sliderhead{
    
  display: flex;
  gap: 20px;
  animation: scroll 10s linear infinite; 
  


}












@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}


@media (max-width: 768px) {
  .sliderhead > div {
    min-width: 240px;
    max-width: 260px;
    padding: 12px;
  }

  .sliderhead h3 {
    font-size: 1rem;
  }

  .sliderhead p {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .sliderhead > div {
    min-width: 220px;
    max-width: 240px;
    padding: 10px;
  }

  .sliderhead h3 {
    font-size: 0.95rem;
  }

  .sliderhead p {
    font-size: 0.8rem;
  }
}

h6{
    text-align: center;
    font-size: large;
    
}


header{
    background-color: black;
}